<template>
  <div class="page">
    <div class="top">
      <h2 class="section-subtitle">我们的师资团队</h2>
      <label class="section-title">OUR TEAM OF TEACHERS</label>
    </div>

    <!-- 教师教师 -->
    <div class="teachers">
      <div v-for="(teacher, index) in teacherTeam" :key="index" class="teacher-card animate">
        <img :src="teacher.avatar" alt="Teacher Image" class="teacher-img">
        <h3 class="teacher-name">{{ teacher.name }} ({{ teacher.subject }})</h3>
        <p class="teacher-desc">{{ teacher.description }}</p>
        <div class="stars">
      <span v-for="n in 5" :key="n" :style="{ color: n <= teacher.rating ? 'orange' : '#ddd' }">★</span>
    </div>
      </div>
    </div>

    <div class="bottom-section animate">
      <h2>点亮游戏梦想，成就策划未来！</h2>
      <p>游戏策划学习新平台，在线课堂数据分析，精准定位学习需求，你的游戏创意，值得被世界看见</p>
    </div>

    <!-- 服务 -->
    <div class="service-section" style="display:flex;flex-direction:row">
      <div v-for="(service, index) in serviceSection" :key="index" class="service-box animate" 
      style="display: flex;
            flex-direction: column;
            width: 35vw;
            height: 60vh;
                justify-content: center;
            align-items: flex-start;">
        <div class="text">
          <h2 style="color:#083171;font-weight:normal;font-size:2em;width: 35vw;">| {{ service.title }}</h2>
          <p style="display: flex;
            flex-direction: column;
            width: 35vw;
            line-height:2">{{ service.description }}</p>
        </div>
        <img :src="service.image" alt="Service Image"  style="width:35vw;height:40vh;object-fit:cover" class="animate">
      </div>
    </div>

  </div>
</template>

<script>
import { reactive, onMounted } from "vue";

export default {
  name: "TeamPage",
  setup() {
    // 静态数据
    const teacherTeam = reactive([
      {
        id: 1,
        name: "Mike",
        subject: "虚拟现实",
        rating: 5,
        description: "年轻新锐，专注于新兴的虚拟现实游戏策划，见解独到。",
        avatar:require("@/assets/picture/老师1.png")
      },
      {
        id: 2,
        name: "Rikey",
        subject: "创新视角",
        rating: 5,
        description: "专注休闲益智游戏策划，以创新视角探索游戏趣味性与教育性结合。",
        avatar: require("@/assets/picture/老师2.png")
      },
      {
        id: 3,
        name: "Sarah",
        rating: 5,
        subject: "玩法机制",
        description: "擅长策略类游戏策划，对游戏数值平衡与玩法机制有深入研究，成果丰硕。",
        avatar: require("@/assets/picture/老师3.png")
      },
      {
        id: 4,
        name: "John",
        rating: 5,
        subject: "资深专家",
        description: "深耕互联网行业四十载，专注于游戏历史演变与文化融合研究。",
        avatar: require("@/assets/picture/老师4.png")
      }
    ]);

    const serviceSection = reactive([
      {
        id: 1,
        title: "资深导师开启游戏策划梦想之门",
        description: "无论您是游戏策划小白，还是寻求突破的从业者，我们的资深导师团队将倾囊相授。系统课程搭配实战项目，助您掌握前沿技能，在游戏行业崭露头角！",
        image: require("@/assets/picture/课堂2.png")
      },
      {
        id: 2,
        title: "行业大咖领航，解锁策划核心奥秘",
        description: "对游戏策划充满热情却不知从何学起？别担心！我们汇聚行业大咖，定制专属课程，从创意构思到项目落地全程指导，助您成为备受青睐的游戏策划精英！",
        image: require("@/assets/picture/课堂1.png")
      }
    ]);

    onMounted(() => {
      addScrollAnimation();
    });

    const addScrollAnimation = () => {
      const elements = document.querySelectorAll(".animate");
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add("fadeIn");
            }
          });
        },
        { threshold: 0.3 }
      );
      elements.forEach((el) => observer.observe(el));
    };

    return {
      teacherTeam,
      serviceSection
    };
  }
};
</script>

<style scoped>
.page {
  width: 100%;
  text-align: center;
  background: #F4F4F4;
}
.section-title {
font-size: 1rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    /* margin-bottom: -60px; */
    font-weight: 100;
    /* text-shadow: 6px -5px 1px black; */
    margin-top: -40px;
    color: rgb(12 64 158 / 37%);
}

.section-subtitle {
font-size: 1.8rem;
    color: #265fb6;
    text-align: center;
margin-bottom: 0px;
}
.top {
  margin: 60px;
  
}
.main-title {
  font-size: 24px;
  color: #ff6600;
  font-weight: bold;
}
.subtitle {
  font-size: 14px;
  color: #999;
}

.teachers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin:60px 0px 120px
}
.teacher-card {
  background: #fff;
  width: 250px;
  text-align: center;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-in-out;
}
.teacher-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  border-radius: 50%;
  margin-bottom: 40px;
}
.teacher-card:hover {
  scale: 1.05;
}
.teacher-name {
  font-size: 18px;
  margin-top: 10px;
}
.teacher-desc {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
.stars {
  font-size: 20px;
  color: orange;
  margin-top: 10px;
}

.service-section {
  display: flex;
  flex-direction: column;
  gap:100px;
  padding: 50px 10%;
}
.service-box {
  margin: 40px 0px 80px 0px;
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-in-out;
}
.service-box .text {
  width: 50%;
  text-align: left;
}
.service-box h2 {
  font-size: 20px;
  margin-bottom: 10px;
}
.service-box p {
  font-size: 16px;
  color: #666;
}

.bottom-section {
  color: white;
  padding: 40px 20px;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-in-out;
  background: url('https://pic.ntimg.cn/file/20230224/29985868_154805041127_2.jpg') ;
}
.bottom-section h2 {
  font-size: 2em;
  font-weight: bold;
}
.bottom-section p {
  font-size: 1em;
  margin-top: 10px;
}

.fadeIn {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.service-box .text p {
  /* 新增隐藏效果和过渡 */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-height: 0;
  overflow: hidden;
}

.service-box:hover .text p {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px; /* 根据实际内容高度调整 */
}
</style>
